<template>
	<scroll-view :scroll-y="true" class="add-quotient">
	
		<view class="form-content">
			<view class="form-item">
				<view class="form-label">
					网点名称
				</view>
				<view class="form-input">
					<u-input v-model="form.dotName" type="select" placeholder='' @click="dotShow=true" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					选商名称
				</view>
				<view class="form-input">
					<u-input v-model="form.customerName" type="text" placeholder='' :adjust-position='false' />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					选商电话
				</view>
				<view class="form-input">
					<u-input v-model="form.tel" type="text" placeholder='' :adjust-position='false' />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					性别
				</view>
				<view class="form-radio">
					<u-radio-group v-model="form.sex">
						<u-radio v-for="(item, index) in sexList" :key="index" :name="item.name" shape="circle">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label">
					行业背景
				</view>
				<view class="form-radio">
					<u-radio-group v-model="form.background">
						<u-radio v-for="(item, index) in backgroundList" :key="index" :name="item.value" shape="circle">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-item" v-if="form.background==1">
				<view class="form-label">
					品牌品类
				</view>
				<view class="form-input">
					<u-input v-model="form.species" type="text" placeholder='' :adjust-position='false' />
				</view>
			</view>
			<view class="form-item" v-if="form.background==1">
				<view class="form-label">
					是否有店
				</view>
				<view class="form-radio">
					<u-radio-group v-model="form.shop">
						<u-radio v-for="(item, index) in shopList" :key="index" :name="item.value" shape="circle">
							{{ item.name }}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view>
				<view>
					行业描述
				</view>
				<view class="textarea-box">
					<u-input v-model="form.des" type="textarea" height="200" auto-height maxlength='200' :adjust-position='false'
						placeholder='请输入从业背景、现有情况(自有业务经营状况)、个人资产情况、社会渠道资源，行业理解、行业匹配度，合作意愿等' />
				</view>

			</view>
		</view>
		<view class="submit-wrap" v-if="!dotItem||dotItem.status==0">

			<view class="btn cancel" @click="addCustomer(0)">
				保存
			</view>
			<view class="btn submit" @click="submitShow=true">
				提交
			</view>
		</view>
		<view class="submit-wrap" v-if="dotItem.status==1">
			<view class="btn cancelbtn" @click="cancelShow=true">
				关闭
			</view>
		</view>



		<u-popup v-model="dotShow" mode='center'>
			<image src="../../static/logs/pupClose.png" mode="" class="pupClose" @click="dotShow=false"></image>
			<view class="dotPup">
				<view class="pupTitle">
					网点名称
				</view>
				<view class="p35">
					<view class="search-box">
						<image src="../../static/logs/search-icon.png" mode=""></image>
						<u-input v-model="searchDotValue" placeholder='输入网点名称' type="text" @input='getDotList'
							:adjust-position='false' />
					</view>
				</view>

				<scroll-view class="dotList " :scroll-y="true">
					<view class="dotItem" v-for="item in dotList" :key="item.id" v-if="item.marketName">
						<view class="itemText" @click="selectDot(item)">
							{{item.marketName}} {{item.outletsCode}}
						</view>

						<view class="dotLine">

						</view>
					</view>

				</scroll-view>
			</view>
		</u-popup>

		<u-popup v-model="quotientShow" mode='center'>
			<view class="dotPup quotientPup">
				<image src="../../static/logs/pupClose.png" mode="" class="pupClose" @click="quotientShow=false">
				</image>
				<view class="pupTitle">
					选商名称
				</view>
				<view class="p35">
					<view class="search-box">
						<image src="../../static/logs/search-icon.png" mode=""></image>
						<u-input v-model="quotientValue" placeholder='输入选商名称' type="text" @input='getQuotientList'
							:adjust-position='false' />
					</view>
				</view>


				<scroll-view :scroll-y="true" class="dotList quotientList">
					<view class="dotItem" v-for="item in quotientList" :key="item.id">
						<view class="itemText" @click="selectQuotient(item)">
							{{item.customerName}}（{{item.customerPhone}}）
						</view>

						<view class="dotLine">

						</view>
					</view>

				</scroll-view>
			</view>
		</u-popup>


		<u-popup v-model="submitShow" mode='center'>
			<view class="submitpup">
				<view class="content-wrap">
					提交后不可修改，是否继续提交？
				</view>
				<view class="pup-btn-wrap">
					<view class="pup-btn" @click="submitShow=false">取消</view>
					<view class="pup-btn pup-submit" @click="addCustomer(1)">确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="cancelShow" mode='center'>
			<view class="cancelpup">
				<view class="title">
					关闭跟进
				</view>

				<view class="tip">
					<view>
						若您要关闭选商跟进，请填写关闭原因
					</view>

					<view class="textarea-box">
						<u-input v-model="form.cancelDes" type="textarea" height="200" auto-height maxlength='200' :adjust-position='false'
							placeholder='请填写关闭原因' />
					</view>
				</view>
				<view class="pup-btn-wrap">
					<view class="pup-btn" @click="cancelShow=false">取消</view>
					<view class="pup-btn pup-submit" @click="closeDot">关闭跟进</view>
				</view>
			</view>
		</u-popup>
	</scroll-view>
</template>

<script>
	import {
		addDot,
		editDot,
		closeDot,
		queryKeyXdstore,
		queryKeyOutlets,
	} from '@/common/service.js'
	export default {
		data() {
			return {
				dotShow: false,
				quotientShow: false,
				form: {
					dotName: '',
					name: '',
					tel: '',
					sex: '男',
					background: 1,
					species: '',
					shop: 1,
					des: '',
					cancelDes: '',
					outletsCode: '',
					customerName: '',
					customerPhone: ''
				},
				dotList: [],
				quotientList: [],
				sexList: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					}
				],
				backgroundList: [{
						name: '家居建材',
						value: 1
					},
					{
						name: '非家居建材',
						value: 0
					}
				],
				shopList: [{
						name: '是',
						value: 1
					},
					{
						name: '否',
						value: 0
					}
				],
				submitShow: false,
				cancelShow: false,
				searchValue: '',
				quotientValue: '',
				searchDotValue: '',
				dotItem: {}

			}
		},
		onLoad() {
			this.getDotList()
			let dotItem = uni.getStorageSync('dotItem') || ''
			this.dotItem = dotItem
			if (dotItem.id) {
				console.log(dotItem);
				this.form.dotName = dotItem.marketName
				this.form.outletsCode = dotItem.outletsCode
				this.form.customerName = dotItem.customerName
				this.form.tel = dotItem.customerPhone
				this.form.sex = dotItem.sex
				this.form.background = dotItem.industry
				this.form.species = dotItem.brand
				this.form.shop = dotItem.isStore
				this.form.des = dotItem.industryDescription

			}
		},
		methods: {
			closeDot() {
				if (!this.form.cancelDes) {
					uni.showToast({
						icon: 'none',
						title: '请输入关闭原因'
					})
					return
				}
				let data = {
					closeReason: this.form.cancelDes,
					id: this.dotItem.id
				}
				closeDot(data,
					(res) => {
						if (res.data.code == 200) {
							console.log(res);
							uni.showToast({
								icon: 'none',
								title: '关闭成功'
							})
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			submitDot(data) {
				data.id = this.dotItem.id
				editDot(data,
					(res) => {
						if (res.data.code == 200) {
							console.log(res);
							uni.showToast({
								icon: 'none',
								title: '修改成功'
							})
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			add(data) {
				addDot(data,
					(res) => {
						if (res.data.code == 200) {
							console.log(res);
							let title = data.status == 1 ? '提交成功' : '保存成功'
							uni.showToast({
								icon: 'none',
								title
							})
							this.refresh()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			},
			refresh() {
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					})
					uni.$emit('getList', true)
				}, 2000)

			},
			addCustomer(status) {

				if (!this.form.outletsCode) {
					uni.showToast({
						icon: 'none',
						title: '请选择网点名称'
					})
					return
				}
				if (!this.form.customerName) {
					uni.showToast({
						icon: 'none',
						title: '请输入选商名称'
					})
					return
				}



				let data = {
					outletsCode: this.form.outletsCode,
					customerName: this.form.customerName,
					customerPhone: this.form.tel,
					sex: this.form.sex,
					industry: this.form.background,
					industryDescription: this.form.des,
					status
				}
				if (this.form.background == 1) {
					data.brand = this.form.species
					data.isStore = this.form.shop
				}


				if (this.dotItem.id) {
					this.submitDot(data)
				} else {
					this.add(data)
				}

			},
			selectDot(item) {
				this.form.dotName = item.marketName
				this.form.outletsCode = item.outletsCode
				this.dotShow = false
			},
			selectQuotient(item) {
				this.form.customerName = item.customerName
				this.form.customerPhone = item.customerPhone
				this.quotientShow = false
			},
			getDotList() {
				let data = {
					keyWord: this.searchDotValue
				}

				queryKeyXdstore(data,
					(res) => {
						this.dotList = res.data.data
						console.log(res.data);
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)

			},
			getQuotientList() {
				let data = {
					keyWord: this.quotientValue,
					outletsCode: this.form.outletsCode,
				}
				queryKeyOutlets(data,
					(res) => {
						this.quotientList = res.data.data
					}, (e) => {
						this.$refs.uToast.show({
							title: e,
							type: "error",
							duration: 3000,
						});
					}
				)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-drawer__scroll-view .uni-scroll-view {
		overflow: visible !important;
	}
	/deep/.u-drawer__scroll-view .dotList .uni-scroll-view {
		overflow: hidden auto!important; 
	}
	
	
	 
	// .u-popup-container {
	//     overflow: visible;
	// }
	.p35 {
		padding: 0 35rpx;
	}

	.dotPup {

		width: 690rpx;
		height: 937rpx;
		padding: 35rpx 0;

		.dotList {
			margin-top: 20rpx;
			height: 660rpx;
			.itemText {
				padding: 20rpx 35rpx;

			}

			.dotLine {
				width: 100%;
				height: 2rpx;
				background-color: #F2F2F2;
			}
		}

		.quotientList {
			height: 320rpx;
			// overflow: hidden auto;
		}

		.search-box {
			width: 100%;
			height: 98rpx;
			background-color: #F7F7F7;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			padding: 0 20rpx;
			box-sizing: border-box;
			margin-top: 30rpx;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}
		}

		.pupTitle {
			text-align: center;
			font-weight: 600;
			font-size: 32rpx;
			color: #333;
		}


	}

	.pupClose {
		width: 46rpx;
		height: 46rpx;
		position: absolute;
		right: -23rpx;
		top: -23rpx;
	}

	.quotientPup {
		height: 593rpx;
	}

	.add-quotient {
		height: 100vh;
		background-color: #F3F5F7;
		// padding-top: 10rpx;

		.form-content {
			background-color: #fff;
			padding: 30rpx;
			min-height: calc(100vh - 160rpx);
		}

		.form-item {
			display: flex;
			align-items: center;
			margin-bottom: 26rpx;
		}

		.form-label {
			color: #666;
			width: 120rpx;
			margin-right: 10rpx;
			text-align-last: justify;
		}

		.form-input {
			flex: 1;
			height: 98rpx;
			background-color: #F7F7F7;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			padding: 0 15rpx;
		}

		.form-radio {
			flex: 1;
			padding: 0 15rpx;
		}


		.submit-wrap {
			width: 100vw;
			height: 120rpx;
			background-color: #fff;
			// padding: 0 30rpx;
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			position: fixed;
			left: 0;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			padding-bottom: constant(safe-area-inset-bottom);
			// padding-bottom: 100rpx;
			box-sizing: content-box;

			.btn {
				width: 330rpx;
				height: 90rpx;
				border-radius: 54rpx;
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #666;
				font-weight: 600;
			}

			.submit {
				background-color: #307DCD;
				color: #fff;

			}

			.cancelbtn {
				width: 100%;
			}
		}
	}

	.submitpup {
		width: 630rpx;
		height: 292rpx;
		padding-top: 70rpx;

		.content-wrap {
			font-size: 32rpx;
			color: #333;
			font-weight: 600;
			text-align: center;
		}
	}

	.cancelpup {
		width: 630rpx;
		height: 606rpx;
		padding-top: 30rpx;

		.title {
			color: #333333;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;

		}

		.tip {
			width: 100%;
			padding: 30rpx;
			color: #333;
			margin-top: 50rpx;
		}
	}

	.pup-btn-wrap {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #F7F7F7;
		display: flex;

		.pup-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #666666;
			font-weight: 600;
			flex: 1;
			height: 100%;
		}

		.pup-submit {
			color: #307DCD;
			border-left: 1px solid #F7F7F7;
		}
	}

	.textarea-box {
		width: 100%;
		padding: 10rpx;
		background-color: #F7F7F7;
	}

	/deep/.u-mode-center-box {
		border-radius: 20rpx;
	}
</style>